<template>
  <div id="app">
   <HeaderUI :seller='seller'></HeaderUI>
   <div class="tab">
   	<div class="tab_item">
   		<router-link to="/">商品</router-link>
   	</div>
  		<div class="tab_item">
   		<router-link to="/ratings">评价</router-link>
   	</div>
  		<div class="tab_item">
   		<router-link to="/seller">商家</router-link>
   	</div>
  	
  </div>
  <router-view :seller="seller"></router-view>
  </div>
  
</template>
<script type="text/javascript">
	//引入安装的axios
	import axios from 'axios'
	import HeaderUI from '@/components/Header.vue'
	export default{
		name:'app',
		data(){
			return{
				seller:{}
			}
		},
		created(){
			axios.get('./data.json').then((res)=>{
				console.log(res.data)
				this.seller=res.data.seller
			})
		},
		components:{
			HeaderUI:HeaderUI
		}
	}
</script>
<style lang="scss">
#app{
	.tab{
		display: flex;
		height: 40px;
		line-height: 40px;
		width: 100%;
		border-bottom: 1px solid rgb(7,17,27,0.1);
		.tab_item{
			flex: 1;
			text-align: center;
			&>a{
				display: block;
				font-size: 14px;
				color: rgb(77,85,93);
				font-weight: 300;
			}
			.router-link-exact-active{
					color: rgb(240,20,20);
				}
		}
	}
}
</style>
